/*
Copyright (c) 2003-2010, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
*/

var data;
var mapNum = 0;

function drawOval(x, y, a, b)
{
    if(arguments.length == 3)
    {
        return drawOval(x, y, a, a);
    }

    var i, j;
    var tpos = [];
    var x1, x2, y1, y2;
    var html = [];

    for(i = 0; i <= a/4*3; i++)
    {
        j = Math.floor(Math.sqrt(b*b - b*b*i*i/(a*a))+0.5);
        x1 = i+x;
        x2 = -i+x;
        y1 = j+y;
        y2 = -j+y;
        if(!tpos[x1*1000+y1])
        {
            drawPos(x1, y1, i, html);
            drawPos(x1, y2, i, html);
            drawPos(x2, y1, i, html);
            drawPos(x2, y2, i, html);
            tpos[x1*1000+y1] = true;
        }
    }


    for(i = 0; i <= b/4*3; i++)
    {
        j = Math.floor(Math.sqrt(a*a - a*a*i*i/(b*b))+0.5);
        x1 = j+x;
        x2 = -j+x;
        y1 = i+y;
        y2 = -i+y;
        if(!tpos[x1*1000+y1])
        {
            drawPos(x1, y1, i, html);
            drawPos(x1, y2, i, html);
            drawPos(x2, y1, i, html);
            drawPos(x2, y2, i, html);
            tpos[x1*1000+y1] = true;
        }
    }

		return html.join("");
}

			function drawPos(x, y, num,html)
    		{
    			if (num % 2 == 0) {
    				html.push("<div class='dpb' style='left:");
    			} else {
    				html.push("<div class='dpw' style='left:");
    			}

        	html.push(x);
        	html.push("px; top:");
        	html.push(y);
        	html.push("px;'></div>");
    		}


		  function drawLine(x0,y0,x1,y1){
				var html = [];

				//竖线
        if((x1-x0)==0){
          for( var i=((y1>y0)?y0:y1); i<((y1>y0)?y1:y0); i++ ){
            drawPos(x1, i, i, html);
          }

          return html.join("");
        }

        //横线
        if((y1-y0)==0){
          for( var i=((x1>x0)?x0:x1); i<((x1>x0)?x1:x0); i++ ){
            drawPos(i, y1, i, html);
          }

          return html.join("");
        }

        //斜线
        //k=斜率，直线方程为y=kx + b
        var k = (y1-y0)/(x1-x0);
        if(Math.abs(k) <= 1){
          for(var i=((x1>x0)?x0:x1); i<((x1>x0)?x1:x0); i++){
            drawPos(i, k*i+y1-k*x1, i, html);
          }
        } else {
          for(var i=((y1>y0)?y0:y1); i<((y1>y0)?y1:y0); i++){
            drawPos((i-y1+k*x1)/k, i, i, html);
          }
        }

        return html.join("");
			}

//实现缩放
var down = 0;
var tmpDragObj = null;
var tmpNum;
var tmpShape;
function moveStart(e, obj, num, shape){
tmpDragObj = obj;
tmpNum = num;
tmpShape = shape;

e = e || window.event;
var objDiv = obj.parentNode;
if(obj.setCapture){
	obj.setCapture();
}
else {
	document.addEventListener("mousemove", moving, true);
	document.addEventListener("mouseup", moveEnd, true);
	e.preventDefault();
}

obj.style.zIndex = "1001";
down = 1;

divWidth = objDiv.clientWidth;
divHeight = objDiv.clientHeight;
divLeft = objDiv.offsetLeft;
divTop = objDiv.offsetTop;

ox = e.clientX;
oy = e.clientY;

e.cancelBubble = true;
e.returnValue = false;
}

function moving(e){
if(down){
var obj = tmpDragObj;
var num = tmpNum;
var shape = tmpShape;

e = e || window.event;
var event = e;

var objDiv = obj.parentNode;
var container = objDiv.parentNode;

switch(num){
//左上角
case 0:
var evtx = event.clientX;
var evty = event.clientY;
var moffsetx = ox - evtx;
var moffsety = oy - evty;

if (moffsety >= divTop) {
		moffsety = divTop;
}
if (moffsetx >= divLeft) {
		moffsetx = divLeft;
}

objDiv.style.left = (divLeft - moffsetx) + "px";
objDiv.style.top = (divTop - moffsety) + "px";
objDiv.style.width = (divWidth + moffsetx) + "px";
objDiv.style.height = (divHeight + moffsety) + "px";
break;

//上边
case 1:
var evty = event.clientY;

//4个方向都要判断
var moffset = oy - evty;
if (shape == "circle") {
	if (moffset >= divTop) {//上
	  moffset = divTop;
  }
  if (moffset >= divLeft) {//左
	  moffset = divLeft;
  }

	objDiv.style.width = (divWidth + moffset) + "px";
	objDiv.style.height = (divHeight + moffset) + "px";
	objDiv.style.left = (divLeft - moffset) + "px";
	objDiv.style.top = (divTop - moffset) + "px";

	//重画圆形
	var showcirDiv = document.getElementById("showcircle" + objDiv.id.substring(4));
	var mvl = (divHeight + moffset)/2;
	showcirDiv.innerHTML = drawOval(mvl, mvl, mvl);
} else {
	if (moffset >= divTop) {
		moffset = divTop;
	}
	objDiv.style.height = (divHeight + moffset) + "px";
	objDiv.style.top = (divTop - moffset) + "px";
}
break;

//右上角
case 2:

var evtx = event.clientX;
var evty = event.clientY;
var moffsetx = evtx - ox;
var moffsety = oy - evty;

if (moffsety >= divTop) {
		moffsety = divTop;
}
if (moffsetx >= container.clientWidth - divLeft - divWidth) {
		moffsetx = container.clientWidth - divLeft - divWidth;
}

objDiv.style.top = (divTop - moffsety) + "px";
objDiv.style.width = (divWidth + moffsetx) + "px";
objDiv.style.height = (divHeight + moffsety) + "px";
break;

//右边
case 3:
var evtx = event.clientX;

var moffset = evtx - ox;
if (shape == "circle") {
  if (moffset >= divTop) {//上
	  moffset = divTop;
  }
  if (moffset >= divLeft) {//左
	  moffset = divLeft;
  }

	objDiv.style.width = (divWidth + moffset) + "px";
	objDiv.style.height = (divHeight + moffset) + "px";
	objDiv.style.left = (divLeft - moffset) + "px";
	objDiv.style.top = (divTop - moffset) + "px";

	//重画圆形
	var showcirDiv = document.getElementById("showcircle" + objDiv.id.substring(4));
	var mvl = (divHeight + moffset)/2;
	showcirDiv.innerHTML = drawOval(mvl, mvl, mvl);
} else {
	if (moffset >= container.clientWidth - divLeft - divWidth) {
		moffset = container.clientWidth - divLeft - divWidth;
	}
	objDiv.style.width = (divWidth + moffset) + "px";
}

break;

//右下角
case 4:
var evtx = event.clientX;
var evty = event.clientY;
var moffsetx = evtx - ox;
var moffsety = evty - oy;

if (moffsetx >= container.clientWidth - divLeft - divWidth) {
		moffsetx = container.clientWidth - divLeft - divWidth;
	}
if (moffsety >= container.clientHeight - divTop - divHeight) {
		moffsety = container.clientHeight - divTop - divHeight;
}

objDiv.style.width = (divWidth + moffsetx) + "px";
objDiv.style.height = (divHeight + moffsety) + "px";
break;

//下边
case 5:
var evty = event.clientY;

var moffset = evty - oy;
if (shape == "circle") {
	if (moffset >= divTop) {//上
	  moffset = divTop;
  }
  if (moffset >= divLeft) {//左
	  moffset = divLeft;
  }

	objDiv.style.width = (divWidth + moffset) + "px";
	objDiv.style.height = (divHeight + moffset) + "px";
	objDiv.style.left = (divLeft - moffset) + "px";
	objDiv.style.top = (divTop - moffset) + "px";

	//重画圆形
	var showcirDiv = document.getElementById("showcircle" + objDiv.id.substring(4));
	var mvl = (divHeight + moffset)/2;
	showcirDiv.innerHTML = drawOval(mvl, mvl, mvl);
} else {
	if (moffset >= container.clientHeight - divTop - divHeight) {
		moffset = container.clientHeight - divTop - divHeight;
	}
	objDiv.style.height = (divHeight + moffset) + "px";
}
break;

//左下角
case 6:
var evtx = event.clientX;
var evty = event.clientY;
var moffsetx = ox - evtx;
var moffsety = evty - oy;

if (moffsetx >= divLeft) {
		moffsetx = divLeft;
}
if (moffsety >= container.clientHeight - divTop - divHeight) {
		moffsety = container.clientHeight - divTop - divHeight;
}

objDiv.style.left = (divLeft - moffsetx) + "px";
objDiv.style.width = (divWidth + moffsetx) + "px";
objDiv.style.height = (divHeight + moffsety) + "px";
break;

//左边
case 7:
var evtx = event.clientX;

var moffset = ox - evtx;
if (shape == "circle") {
	if (moffset >= divLeft) {//左
	  moffset = divLeft;
  }
  if (moffset >= divTop) {//上
	  moffset = divTop;
  }

	objDiv.style.width = (divWidth + moffset) + "px";
	objDiv.style.height = (divHeight + moffset) + "px";
	objDiv.style.left = (divLeft - moffset) + "px";
	objDiv.style.top = (divTop - moffset) + "px";

	//重画圆形
	var showcirDiv = document.getElementById("showcircle" + objDiv.id.substring(4));
	var mvl = (divHeight + moffset)/2;
	showcirDiv.innerHTML = drawOval(mvl, mvl, mvl);
} else {
	if (moffset >= divLeft) {
		moffset = divLeft;
	}
	objDiv.style.left = (divLeft - moffset) + "px";
	objDiv.style.width = (divWidth + moffset) + "px";
}
break;
};
}
}

function moveEnd(e){
var obj = tmpDragObj;
var shape = tmpShape;

e = e || window.event;
down = 0;
obj.style.zIndex = "6";

var objDiv = obj.parentNode;
var con = objDiv.parentNode
id = objDiv.id;

if (shape == "circle") {
	var rl = Math.floor(objDiv.offsetWidth/2);
	var centerx = objDiv.offsetLeft + rl;
	var centery = objDiv.offsetTop  + rl

	data[id].x1 = centerx;
	data[id].y1 = centery;
	data[id].r = rl;
} else {
	var tx1 = objDiv.offsetLeft;
	var ty1 = objDiv.offsetTop;
	var tx2 = tx1 + objDiv.offsetWidth;
	var ty2 = ty1 + objDiv.offsetHeight;

	data[id].x1 = tx1;
	data[id].y1 = ty1;
	data[id].x2 = tx2;
	data[id].y2 = ty2;
}

if(obj.releaseCapture){
	obj.releaseCapture();
} else {
	document.removeEventListener("mousemove", moving, false);
	document.removeEventListener("mouseup", moveEnd, false);
}

};

function setUrl(murl, num) {
	data["drag" + num].href = murl;
}









(function()
{
	var imageDialog = function( editor, dialogType )
	{
		var curId = null;
		var myDialog = null;

		var chageCurArea = function(e) {
			e = e || window.event;
			var srcelm = e.srcElement || e.target;
			var curNewId = srcelm.id;

			if (curNewId.indexOf("CKeditorcenter") == -1) {//非拖拽图层
				return;
			}

			if (curNewId.indexOf("drag") != -1
					&& data[curNewId].shape != "rect") {//圆形或多边形的底层
				return;
			}

			if (curNewId == curId) {//点击上次选中对象
				return;
			}

			if (curId != null) {
				var oldEl = document.getElementById(curId);
				oldEl.style.background = "#fff";
			}

			var newEl = document.getElementById(curNewId);
			newEl.style.background = "red";

			curId = curNewId;

			//显示对应热区的数据信息
			var tmpId = curId.replace("CKeditorcenter", "drag");

			var href = data[tmpId].href;
			var target = data[tmpId].target;

			if (!target) {
				target = "";
			}

			myDialog.setValueOf("tab1", "areaImageUrl", href);
			myDialog.setValueOf("tab1", "areaImageCmbTarget", target);
		}

var Drag = function(id){
var el = document.getElementById(id),
shape = arguments[1];
options  = arguments[2] || {},
container = options.container || document.documentElement,
limit = false || options.limit;
el.style.position = "absolute";

var drag = function(e) {
e = e || window.event;
!+"\v1"? document.selection.empty() : window.getSelection().removeAllRanges();
var _left = e.clientX - el.offset_x,
_top = e.clientY - el.offset_y;


if(limit){
if (_left < 0) {
	_left = 0;
}
if (_top < 0) {
	_top = 0;
}
var lmr = container.clientWidth - el.offsetWidth;
var lmd = container.clientHeight - el.offsetHeight;
if (_left > lmr) {
	_left = lmr;
}
if (_top > lmd) {
	_top = lmd;
}
}

el.style.left = _left  + "px";
el.style.top = _top  + "px";
}


var dragend = function(){
document.onmouseup = null;
document.onmousemove = null;

var el = document.getElementById(id);

if (shape == "circle") {
	var rl = Math.floor(el.offsetWidth/2);

	var centerx = el.offsetLeft + rl;
	var centery = el.offsetTop + rl

	data[id].x1 = centerx;
	data[id].y1 = centery;
	data[id].r = rl;
} else {
	var tx1 = el.offsetLeft;
	var ty1 = el.offsetTop;
	var tx2 = tx1 + el.offsetWidth;
	var ty2 = ty1 + el.offsetHeight;

	data[id].x1 = tx1;
	data[id].y1 = ty1;
	data[id].x2 = tx2;
	data[id].y2 = ty2;
}

}

var dragstart = function(e){
e = e || window.event;
el.offset_x = e.clientX - el.offsetLeft;
el.offset_y = e.clientY - el.offsetTop;

document.onmouseup = dragend;
document.onmousemove = drag;
el.style.zIndex = ++Drag.z;
}

Drag.z = 999;

el.onmousedown = dragstart;

var str = "";
str = str + '<div id="rLeft" onmousedown="moveStart(event,this,7,\'' + shape + '\');" onmousemove="moving(event);"onmouseup="moveEnd(event);" ></div>';//左边div
str = str + '<div id="rRight" onmousedown="moveStart(event,this,3,\'' + shape + '\');" onmousemove="moving(event);"onmouseup="moveEnd(event);" ></div>';//右边div
str = str + '<div id="rUp"onmousedown="moveStart(event,this,1,\'' + shape + '\');" onmousemove="moving(event);"onmouseup="moveEnd(event);" ></div>';//上边div
str = str + '<div id="rDown"onmousedown="moveStart(event,this,5,\'' + shape + '\');" onmousemove="moving(event);"onmouseup="moveEnd(event);" ></div>';//下边div

var centerId = id.replace("drag","CKeditorcenter");
var appendStyle = "";

if(document.all && navigator.userAgent.indexOf("MSIE 7.0") != -1) {
	appendStyle = 'style="left:35%;"';
}
if (shape == "circle") {
	str += '<div id="' + centerId + '" class="CKeditorcenter" ' + appendStyle + ' tabindex="0"></div>';
	var mr = 50;
	if (imgwidth< 100){
		mr = imgwidth/2;
	} else if (imgheight < 100){
		mr = imgheight/2;
	}
	if (data[id]) {
		mr = data[id].r;
	}
	str += '<div id="showcircle' + areaNum + '">' + drawOval(mr, mr, mr) + '</div>';
} else if (shape == "rect") {//方形有斜向拉动
	str += '<div id="' + centerId + '" class="CKeditorcenter" ' + appendStyle + ' tabindex="0"></div>';
	str = str + '<div id="rLeftDown" onmousedown="moveStart(event,this,6,\'' + shape + '\');" onmousemove="moving(event);"onmouseup="moveEnd(event);" ></div>';//左下角div
	str = str + '<div id="rRightUp"onmousedown="moveStart(event,this,2,\'' + shape + '\');" onmousemove="moving(event);"onmouseup="moveEnd(event);" ></div>';//右上角div
	str = str + '<div id="rRightDown" onmousedown="moveStart(event,this,4,\'' + shape + '\');" onmousemove="moving(event);"onmouseup="moveEnd(event);" ></div>';//右下角div
	str = str + '<div id="rLeftUp" onmousedown="moveStart(event,this,0,\'' + shape + '\');" onmousemove="moving(event);"onmouseup="moveEnd(event);" ></div>';//左上角div
} else {
	var cleft = data[id].x2 - data[id].x1 - 5;
	var ctop = data[id].y2 - data[id].y1 - 5;
	str = "";
	str += '<div id="' + centerId + '" class="CKeditorcenter" ' + appendStyle + ' tabindex="0"></div>';
	var pldata = data[id].pldata;
	var x1 = pldata[0].x;
	var y1 = pldata[0].y;
	for (var i = 1; i < pldata.length; i++) {
		str += drawLine(x1, y1, pldata[i].x, pldata[i].y);
		x1 = pldata[i].x;
		y1 = pldata[i].y;
	}

	str += drawLine(x1, y1, pldata[0].x, pldata[0].y);
}

el.innerHTML = str;
if (!data[id]) {
	var dragWidth = 100;
	if (imgwidth< 100){
		dragWidth = imgwidth;
	} else if (imgheight < 100){
		dragWidth = imgheight;
	}

	el.style.width = dragWidth + "px";
	el.style.height = dragWidth + "px";

	if (shape == "circle") {
		data[id] = {shape: "circle",href: "http://", x1:dragWidth/2, y1:dragWidth/2, r:dragWidth/2};
	} else if (shape == "rect") {
		data[id] = {shape: "rect",href: "http://", x1:0, y1:0, x2:dragWidth, y2:dragWidth};
	}
} else {
	if (shape == "circle") {
		el.style.left = (data[id].x1 - data[id].r) + "px";
	  el.style.top = (data[id].y1 - data[id].r) + "px";
		el.style.width = (data[id].r * 2) + "px";
		el.style.height = (data[id].r * 2) + "px";
	} else {//方形或多边形
		el.style.left = (data[id].x1) + "px";
	  el.style.top = (data[id].y1) + "px";
		el.style.width = (data[id].x2 - data[id].x1) + "px";
		el.style.height = (data[id].y2 - data[id].y1) + "px";
	}
}
}

function removeAe(e) {
	e = e || window.event;
	if(e.keyCode == 46) {
		var areaDiv = e.srcElement || e.target;
		if (areaDiv.id.indexOf("CKeditorcenter") != -1) {//选中中心区
			areaDiv = areaDiv.parentNode;
		}

		//当前选中对象为空
		curId = null;
		myDialog.setValueOf("tab1", "areaImageUrl", "");
	  myDialog.setValueOf("tab1", "areaImageCmbTarget", "");

		delete data[areaDiv.id];
    areaDiv.parentNode.removeChild(areaDiv);
  }
}

			 var areaNum = 0;
			 var colors = ["red", "#66c", "#E8D098", "#fff", "#E8FFE8", "#ff0"];
			 function crArea(shape) {
			 	 var con = document.getElementById("parent");
				 var areaElement = document.createElement("div");

				 con.appendChild(areaElement);

					areaElement.id = "drag" + areaNum;
					areaElement.onclick = chageCurArea;
					areaElement.onkeydown = removeAe;

					if (shape == "circle") {
						areaElement.className = "dragcircle";
					} else if (shape == "rect") {
						areaElement.className = "drag";

						areaElement.style.filter = "alpha(opacity=40)";
					} else {
						var pldata = arguments[1];
						if (pldata.length < 3) {
							return;
						}

						var minX = 10000;
						var minY = 10000;
						var maxX = 0;
						var maxY = 0;

						for (i = 0; i < pldata.length; i++) {
							d = pldata[i];
							if (d.x > maxX) {
								maxX = d.x;
							}
							if (d.x < minX) {
								minX = d.x;
							}
							if (d.y > maxY) {
								maxY = d.y;
							}
							if (d.y < minY) {
								minY = d.y;
							}
						}

						for (k = 0; k < pldata.length; k++) {
							d2 = pldata[k];
							d2.x -= minX;
							d2.y -= minY;
						}

						var id = "drag" + areaNum;
						if (!data[id]) {//新创建
							data[id] =
								{shape: "polygon",href: "http://",x1:minX,y1:minY,x2:maxX,y2:maxY,pldata:pldata};
						} else {//加载
							data[id].x1 = minX;
							data[id].y1 = minY;
							data[id].x2 = maxX;
							data[id].y2 = maxY;
							data[id].pldata = pldata;
						}
					}

				new Drag("drag" + areaNum, shape, {container:con,limit:true});
				areaNum++;

				con.focus();
			}

			var pllock = 0;//未点击多边形按钮为0，点击为1

		 var mOkOp = function() {
		 	if(curId != null) {
		 		var href = myDialog.getValueOf("tab1", "areaImageUrl");
		 		var tmpId = curId.replace("CKeditorcenter", "drag");
				data[tmpId].href = href;
		 	}

			//设置或更新热区数据
			setOrReplaceArea();

			cleanOp();

      //editor.setData(editor.getData());
		 }

		 var mCancelOp = function() {
		 	cleanOp();
		 }

		function setOrReplaceArea() {
			var element = editor.getSelection().getSelectedElement();
			var mpName = element.getAttribute("usemap");

			if (mpName == "" || mpName == null) {
				mpName = "ckMap" + mapNum++;
				element.setAttribute("usemap", "#" + mpName);
			} else {
				mpName = mpName.substring(1);
				var list = editor.document.getElementsByTag("map");
				for (i = 0; i < list.count(); i++) {
					if (list.getItem(i).getAttribute("name") == mpName) {
						list.getItem(i).remove();
					}
				}
			}

			if (document.all){//ie
				var tmpMap = editor.document.$.createElement('<map name="' + mpName + '">');
			} else {
				var tmpMap = editor.document.$.createElement("map");
				tmpMap.setAttribute("name", mpName);
			}

			tmpMap = new CKEDITOR.dom.element(tmpMap);

			var tmpArea;
			var tmpCd;
			var entryNum = 0;
			for (i in data) {
				if (data[i]!= null){
					entryNum ++;

					tmpArea = editor.document.createElement("area");
					tmpArea.setAttribute("shape", data[i].shape);
					tmpArea.setAttribute("href", data[i].href);
					if (data[i].target && data[i].target != "") {
						tmpArea.setAttribute("target", data[i].target);
					}
					tmpCd = data[i].x1 + "," + data[i].y1 + ",";
					if (data[i].shape == "rect") {
						tmpCd += data[i].x2 + "," + data[i].y2;
					} else if (data[i].shape == "circle") {
						tmpCd += data[i].r;
					} else {//多边形
						tmpCd = "";

						var pldata = data[i].pldata;
						var mleft = data[i].x1;
						var mtop = data[i].y1
						for (var i = 0; i < pldata.length; i++){
							tmpCd += (mleft + pldata[i].x) + "," + (mtop + pldata[i].y) + ","
						}
						tmpCd = tmpCd.substring(0, tmpCd.length - 1);
					}
					tmpArea.setAttribute("coords", tmpCd);

					tmpMap.append(tmpArea);
				}
			}

			if (entryNum > 0) {
				tmpMap.insertAfter(element);
			}
  	}

  	function cleanOp() {
  		//清理热区图层
			var con = document.getElementById("parent");
			for (i in data) {
				if (data[i] != null){
					con.removeChild(document.getElementById(i));
				}
			}

      data = null;
      areaNum = 0;
      curId = null;
  	}

		function trimPx(pxNum) {
			if (pxNum == null) {
				return "";
			}

			var idx = pxNum.toLowerCase().indexOf("px");
			if (idx == -1) {
				return pxNum;
			} else {
				return Number(pxNum.substring(0, idx));
			}
		}

		var mshowOp = function() {
			myDialog = this;

			var melement = editor.getSelection().getSelectedElement();
			var myurl = melement.getAttribute("src");

			var pdiv = document.getElementById("parent");

			var myimg = document.getElementById("showImg");
			myimg.src = myurl

			var tmpImg = new Image();
			tmpImg.src = myurl;

			var mtwidth = trimPx(melement.getStyle("width"));
			var mtheight = trimPx(melement.getStyle("height"));
			// 2018-12-13,自适应手机宽度的时候，图片宽100%，下边会报错
			if (mtwidth == "100%" || mtheight == "auto") {
				mtwidth = melement.getAttribute('oriwidth')
			}
			if (mtheight == "100%" || mtheight == "auto") {
				mtheight = melement.getAttribute('oriheight')
			}
			// end
			if (mtwidth == "") {
				mtwidth = trimPx(melement.getAttribute("width"));
				if (mtwidth == "") {
					mtwidth = tmpImg.width;
				}
			}
			if (mtheight == "") {
				mtheight = trimPx(melement.getAttribute("height"));
				if (mtheight == "") {
					mtheight = tmpImg.height;
				}
			}
			tmpImg = null;

			pdiv.style.width = myimg.style.width = mtwidth + "px";
			pdiv.style.height = myimg.style.height = mtheight + "px";

			myimg.style.position = "absolute";

			mtwidth = Number(mtwidth);
			mtheight = Number(mtheight);

			imgwidth = mtwidth;
		  	imgheight = mtheight;

			var sdiv = document.getElementById("scroolArea");
			//最大图片区域600*400
			if (mtwidth >= 600 || mtheight >= 400) {
				mtwidth = mtwidth >= 600 ? 619: mtwidth + 19;
				mtheight = mtheight >= 400 ? 419 : mtheight + 19;

				sdiv.style.width = mtwidth + "px";
				sdiv.style.height = mtheight + "px";
				sdiv.style.overflow = "scroll";
				sdiv.style.position = "absolute";
			} else {
				sdiv.style.overflow = "";
			}

			this.resize(mtwidth, mtheight + 50);

			var areaTD = document.getElementById("areaTD");
			areaTD.style.width = mtwidth + "px";
			areaTD.style.height = mtheight + "px";

			//初始化热区
			data = new Object();
			var mpName = melement.getAttribute("usemap");
			if (mpName != "" && mpName != null) {
				mpName = mpName.substring(1);
				var list = editor.document.getElementsByTag("map");
				var tmpMap = null;
				var tmpName = "";
				for (i = 0; i < list.count(); i++) {
					tmpName = list.getItem(i).getAttribute("name");
					//在这里查找最大ckMap值
					if (tmpName.indexOf("ckMap") != -1) {
						mapNum = Number(tmpName.substring(5));
					}

					if (tmpName == mpName) {
						tmpMap = list.getItem(i);
					}
				}

				if (tmpMap != null) {
					var areaList = tmpMap.getChildren();

					if (areaList.count() > 0) {
						var tmpArea;
						var tmpCord;
						var id = "";
						var tmpNum = 0;
						for (var k = 0; k < areaList.count(); k++) {
							tmpArea = areaList.getItem(k);
							if (tmpArea.type == CKEDITOR.NODE_TEXT){
								continue;
							}
							tmpCord = tmpArea.getAttribute("coords").split(",");

							id = "drag" + tmpNum++;
							var shape = tmpArea.getAttribute("shape").toLowerCase();
							var target = tmpArea.getAttribute("target");

							data[id] = {shape:shape, href:tmpArea.getAttribute("href")};
							if (target && target != "") {
								data[id].target = target.toLowerCase();
							}

							if (shape == "polygon") {
								var pldata = new Array();
								for (var i = 0; i < tmpCord.length; i += 2) {
									pldata.push({x:Number(tmpCord[i]), y:Number(tmpCord[i + 1])});
								}

								crArea("polygon", pldata);
							} else {
								data[id].x1 = Number(tmpCord[0]);
								data[id].y1 = Number(tmpCord[1]);

								if (shape == "rect") {
									data[id].x2 = Number(tmpCord[2]);
									data[id].y2 = Number(tmpCord[3]);
								} else {//圆形
									data[id].r = Number(tmpCord[2]);
								}
								crArea(shape);
							}
						}
					}
				}
			}
		}

		var mloadOp = function() {
			var rb =  document.getElementById("aiRectButton");
			rb.onclick = function() {
				crArea('rect');
			};

		  var cb = document.getElementById("aiCircleButton");
		  cb.onclick = function() {
		  	crArea('circle');
		  };

		  var pb = document.getElementById("aiPolygonButton");
		  pb.onclick = function() {
		  				if (pllock == 1) {
								alert("已在多边形绘制状态");
								return;
							} else {
								pllock = 1;
							}

							var container = document.getElementById("parent");

							var pldiv = document.createElement("div");
							pldiv.style.width = container.style.width;
							pldiv.style.height = container.style.height;
							pldiv.style.zIndex = 10000;
							pldiv.style.position = "absolute";
							pldiv.style.background = "#fff";
							pldiv.style.filter = "alpha(opacity=30)";
							pldiv.style.opacity = "0.3";
//firefox形式滤镜
							pldiv.setAttribute("tabindex", "0");

							var path = CKEDITOR.plugins.getPath("areaimage");
							pldiv.style.cursor = "url(" + path + "/images/pen.cur)";

							pldiv.onclick = function(event) {
								event = event || window.event;

								var lg = pldata.length;
								var sdiv = document.getElementById("scroolArea");
								var ox = event.clientX + sdiv.scrollLeft - left;
								var oy = event.clientY + sdiv.scrollTop - top;

								if (lg == 0) {
									var nodediv = document.createElement("div");
									nodediv.className = "node";
									nodediv.id = "mstartNode";
									nodediv.style.left = (ox - 5) + "px";
									nodediv.style.top = (oy -5) + "px";
									nodediv.style.zIndex = 10010;
									nodediv.style.cursor = "crosshair";
									nodediv.onclick = savePolygon;

									pldiv.appendChild(nodediv);

									content = pldiv.innerHTML;
								} else {
									if (pldiv ==null) {
										return;
									}
									content += drawLine(pldata[lg - 1].x, pldata[lg - 1].y, ox, oy);
									pldiv.innerHTML = content;
									document.getElementById("mstartNode").onclick = savePolygon;
								}

								pldata.push({x:ox, y:oy});
							};

							pldiv.onkeydown = function(event) {
								event = event || window.event;

								if(event.keyCode == 13) {
								  savePolygon();
								} else if (event.keyCode == 8) {//backspace

								} else if (event.keyCode == 46) {
									container.removeChild(pldiv);
									pllock = 0;
								}
							};

							container.appendChild(pldiv);

							//获取div相对浏览器的绝对偏移
							var parentObj = pldiv;
 							var left = pldiv.offsetLeft;
 							var top = pldiv.offsetTop;
 							while(parentObj = parentObj.offsetParent){
 								left += parentObj.offsetLeft;
 								top += parentObj.offsetTop;
 							}

 							var pldata = new Array();
 							var content = "";

 							var savePolygon = function () {
									if (pldata.length < 3 ) {
										return;
								  }

								  //在container中生成多边形图层，并取消多边形编辑状态
									container.removeChild(pldiv);
									pldiv = null;
									pllock = 0;

									crArea("polygon", pldata);
							}
		  };

		  var pdiv = document.getElementById("parent");
		  pdiv.onkeydown = function(event) {
		  	if(!document.all){
		  		return;
		  	}

		  	event = event || window.event;
		  	if(event.keyCode == 13) {
		  		var rt = mOkOp();
		  		if (rt != false) {
		  			myDialog.hide();
		  		}
		  	}
		  }

		  var dragDiv = document.getElementById("dragPoint");
		  dragDiv.style.display = "";

		  var dx = 0;
		  var dy = 0;
		  var dn = 0;
		  var dg = this;
		  var dgwidth = 0;
		  var dgheight = 0;
		  dragDiv.onmousedown = function(event) {
		  	var e = event || window.event;

		  	if(this.setCapture){
					this.setCapture();
				} else {
	        document.addEventListener("mousemove", dmousemove, true);
	        document.addEventListener("mouseup", dmouseup, true);
	        e.preventDefault();
				}

				dx = e.clientX;
				dy = e.clientY;

				dn = 1;

				e.cancelBubble = true;
				e.returnValue = false;

				dgwidth = imgwidth;
		    dgheight = imgheight;
				if (dgwidth >= 600 || dgheight >= 400) {
				  dgwidth = dgwidth >= 600 ? 619: dgwidth + 19;
				  dgheight = dgheight >= 400 ? 419 : dgheight + 19;
			  }
		  }

			function dmousemove(event) {
				if (dn) {
					var e = event || window.event;

					var ndw = e.clientX - dx + dgwidth;
					var ndh = e.clientY - dy + dgheight;

					var sdiv = document.getElementById("scroolArea");
					if (ndw < imgwidth || ndh < imgheight) {//显示滚动区
						sdiv.style.width = ndw + "px";
						sdiv.style.height = ndh + "px";
						sdiv.style.overflow = "scroll";
						sdiv.style.position = "absolute";
					} else {
						sdiv.style.overflow = "";
					}

					var areaTD = document.getElementById("areaTD");
					areaTD.style.width = ndw + "px";
					areaTD.style.height = ndh + "px";

					dg.resize(ndw, ndh + 50);
				}
			}
			dragDiv.onmousemove = dmousemove;

			function dmouseup(event) {
				if(this.releaseCapture){
					this.releaseCapture();
				} else {
					document.removeEventListener("mousemove", dmousemove, false);
					document.removeEventListener("mouseup", dmouseup, false);
				}
				dn = 0;
			}
			dragDiv.onmouseup = dmouseup;
		}


		var imgwidth;
		var imgheight;
		return {
		//title : editor.lang.image.title,
		title : "热区设置",
		onLoad : mloadOp,
		onShow : mshowOp,
		onOk : mOkOp,
		onHide: mCancelOp,
		contents : [
			{
				id : 'tab1',
				label : '',
				title : '',
				expand : true,
				padding : 0,
				elements :
				[
					{
						type : 'hbox',
						children :
						[
						{
							type : 'vbox',
							align: 'left',
							width: '100%',
							children :[
							{
						type : 'html',
						html :
							'<style type="text/css">' +
								'.drag {LEFT: 0px; WIDTH: 100px; CURSOR: move; TOP: 0px; HEIGHT: 100px;border : 1px dashed blue;display: block; background:none;}' +
								'.dragcircle {LEFT: 0px; WIDTH: 100px; CURSOR: move; TOP: 0px; HEIGHT: 100px;}' +
								'.dpw {position:absolute; width:1px; height:1px; overflow:hidden; background-color:#fff}' +
								'.dpb {position:absolute; width:1px; height:1px; overflow:hidden; background-color:#0000ff}'+
								'.node{BORDER-RIGHT: #333 1px solid; BORDER-TOP: #333 1px solid; FONT-SIZE: 0px; Z-INDEX: 500; BACKGROUND: red; FILTER: alpha(opacity=90); BORDER-LEFT: #333 1px solid; WIDTH: 16px; BORDER-BOTTOM: #333 1px solid; POSITION: absolute; HEIGHT: 16px;}' +
								'#parent {width:500px;height:500px;BORDER-RIGHT: #666666 1px solid; BORDER-TOP: #666666 1px solid; BORDER-LEFT: #666666 1px solid;BORDER-BOTTOM: #666666 1px solid;POSITION: absolute;}' +
								'#rRightDown {' +
									'BORDER-RIGHT: #333 1px solid; BORDER-TOP: #333 1px solid; FONT-SIZE: 0px; Z-INDEX: 500; BACKGROUND: #fff; FILTER: alpha(opacity=50); BORDER-LEFT: #333 1px solid; WIDTH: 6px; BORDER-BOTTOM: #333 1px solid; POSITION: absolute; HEIGHT: 6px; opacity: 0.5' +
								'}' +
								'#rLeftDown {' +
									'BORDER-RIGHT: #333 1px solid; BORDER-TOP: #333 1px solid; FONT-SIZE: 0px; Z-INDEX: 500; BACKGROUND: #fff; FILTER: alpha(opacity=50); BORDER-LEFT: #333 1px solid; WIDTH: 6px; BORDER-BOTTOM: #333 1px solid; POSITION: absolute; HEIGHT: 6px; opacity: 0.5' +
								'}' +
								'#rLeftUp {' +
									'BORDER-RIGHT: #333 1px solid; BORDER-TOP: #333 1px solid; FONT-SIZE: 0px; Z-INDEX: 500; BACKGROUND: #fff; FILTER: alpha(opacity=50); BORDER-LEFT: #333 1px solid; WIDTH: 6px; BORDER-BOTTOM: #333 1px solid; POSITION: absolute; HEIGHT: 6px; opacity: 0.5' +
								'}' +
								'#rRightUp {' +
									'BORDER-RIGHT: #333 1px solid; BORDER-TOP: #333 1px solid; FONT-SIZE: 0px; Z-INDEX: 500; BACKGROUND: #fff; FILTER: alpha(opacity=50); BORDER-LEFT: #333 1px solid; WIDTH: 6px; BORDER-BOTTOM: #333 1px solid; POSITION: absolute; HEIGHT: 6px; opacity: 0.5' +
								'}' +
								'#rRight {' +
									'BORDER-RIGHT: #333 1px solid; BORDER-TOP: #333 1px solid; FONT-SIZE: 0px; Z-INDEX: 500; BACKGROUND: #fff; FILTER: alpha(opacity=50); BORDER-LEFT: #333 1px solid; WIDTH: 6px; BORDER-BOTTOM: #333 1px solid; POSITION: absolute; HEIGHT: 6px; opacity: 0.5' +
								'}' +
								'#rLeft {' +
									'BORDER-RIGHT: #333 1px solid; BORDER-TOP: #333 1px solid; FONT-SIZE: 0px; Z-INDEX: 500; BACKGROUND: #fff; FILTER: alpha(opacity=50); BORDER-LEFT: #333 1px solid; WIDTH: 6px; BORDER-BOTTOM: #333 1px solid; POSITION: absolute; HEIGHT: 6px; opacity: 0.5' +
								'}' +
								'#rUp {' +
									'BORDER-RIGHT: #333 1px solid; BORDER-TOP: #333 1px solid; FONT-SIZE: 0px; Z-INDEX: 500; BACKGROUND: #fff; FILTER: alpha(opacity=50); BORDER-LEFT: #333 1px solid; WIDTH: 6px; BORDER-BOTTOM: #333 1px solid; POSITION: absolute; HEIGHT: 6px; opacity: 0.5' +
								'}' +
								'#rDown {' +
									'BORDER-RIGHT: #333 1px solid; BORDER-TOP: #333 1px solid; FONT-SIZE: 0px; Z-INDEX: 500; BACKGROUND: #fff; FILTER: alpha(opacity=50); BORDER-LEFT: #333 1px solid; WIDTH: 6px; BORDER-BOTTOM: #333 1px solid; POSITION: absolute; HEIGHT: 6px; opacity: 0.5' +
								'}' +
								'#rLeftDown {' +
									'CURSOR: ne-resize' +
								'}' +
								'#rRightUp {' +
									'CURSOR: ne-resize' +
								'}' +
								'#rRightDown {' +
									'CURSOR: nw-resize' +
								'}' +
								'#rLeftUp {' +
									'CURSOR: nw-resize' +
								'}' +
								'#rRight {' +
									'CURSOR: e-resize' +
								'}' +
								'#rLeft {' +
									'CURSOR: e-resize' +
								'}' +
								'#rUp {' +
									'CURSOR: n-resize' +
								'}' +
								'#rDown {' +
									'CURSOR: n-resize' +
								'}' +
								'#rLeftDown {' +
									'LEFT: -4px; BOTTOM: -4px' +
								'}' +
								'#rRightUp {' +
									'RIGHT: -4px; TOP: -4px' +
								'}' +
								'#rRightDown {' +
									'RIGHT: -4px; BOTTOM: -4px; BACKGROUND-COLOR: #00f' +
								'}' +
								'#rLeftUp {' +
									'LEFT: -4px; TOP: -4px' +
								'}' +
								'#rRight {' +
									'MARGIN-TOP: -4px; RIGHT: -4px; TOP: 50%' +
								'}' +
								'#rLeft {' +
									'MARGIN-TOP: -4px; LEFT: -4px; TOP: 50%' +
								'}' +
								'#rUp {' +
									'LEFT: 50%; MARGIN-LEFT: -4px; TOP: -4px' +
								'}' +
								'#rDown {' +
									'LEFT: 50%; MARGIN-LEFT: -4px; BOTTOM: -4px' +
								'}' +
								'.CKeditorcenter {' +
								  'BORDER-RIGHT: #333 1px solid; BORDER-TOP: #333 1px solid; FONT-SIZE: 0px; Z-INDEX: 500; BACKGROUND: #fff; FILTER: alpha(opacity=50); BORDER-LEFT: #333 1px solid; WIDTH: 18px; BORDER-BOTTOM: #333 1px solid; POSITION: absolute; HEIGHT: 18px; opacity: 0.5; CURSOR: move;' +
								'}' +
								'.CKeditorcenter {' +
									'MARGIN: 42%; top: 50%; margin-top: -9px' +
								'}' +
								'#bgDiv {' +
									'BORDER-RIGHT: #666666 1px solid; BORDER-TOP: #666666 1px solid; BORDER-LEFT: #666666 1px solid; WIDTH: 300px; BORDER-BOTTOM: #666666 1px solid; POSITION: relative; HEIGHT: 400px' +
								'}' +
								'#dragDiv {' +
									'BORDER-RIGHT: #fff 1px dashed; BORDER-TOP: #fff 1px dashed; LEFT: 50px; BORDER-LEFT: #fff 1px dashed; WIDTH: 100px; BORDER-BOTTOM: #fff 1px dashed; TOP: 50px; HEIGHT: 60px' +
								'}' +
								'#dragPoint {' +
									'BORDER-RIGHT: #333 1px solid; BORDER-TOP: #333 1px solid; FONT-SIZE: 0px; Z-INDEX: 500; BACKGROUND: #fff; FILTER: alpha(opacity=50); BORDER-LEFT: #333 1px solid; WIDTH: 6px; BORDER-BOTTOM: #333 1px solid; POSITION: absolute; HEIGHT: 6px; opacity: 0.5' +
								'}' +
								'#dragPoint {' +
									'CURSOR: nw-resize' +
								'}' +
								'#dragPoint {' +
									'RIGHT: -4px; BOTTOM: -4px; BACKGROUND-COLOR: #00f' +
								'}' +
							'</style>' +
							'<table>' +
							'<tr><td align="left" 0%;><img alt="方形" height="25" src="' + CKEDITOR.plugins.getPath("areaimage") + 'images/ico1.png" title="方形" width="25" id="aiRectButton"/>&nbsp;' +
							'<img alt="圆形" height="25" src="' + CKEDITOR.plugins.getPath("areaimage") + 'images/ico2.png" title="圆形" width="25" id="aiCircleButton"/>&nbsp;' +
							'<img alt="多边形" height="25" src="' + CKEDITOR.plugins.getPath("areaimage") + 'images/ico3.png" title="多边形" width="25" id="aiPolygonButton"/></td></tr>' +
							'<tr><td id="areaTD" align="left" ><div id="scroolArea"  style="z-index:10000"><div id="parent" tabindex="0"><img id="showImg" style="POSITION: absolute;"></img></div></div></td></tr>' +
							'</table>'
						  },
						  {
						  type : 'hbox',
						  height: '100%',
							children :[
							  {
									type : 'text',
									width: '133px',
									id : 'areaImageUrl',
									labelAlign: 'right',
									'default' : '',
									labelLayout : 'horizontal',
									label : '链接:',
									onChange : function(){
										if(curId == null) {
											return;
										}

										var href = myDialog.getValueOf("tab1", "areaImageUrl");
										var tmpId = curId.replace("CKeditorcenter", "drag");
										data[tmpId].href = href;
									}
							  },
							  {
							  	id : 'areaImageCmbTarget',
									type : 'select',
									labelLayout : 'horizontal',
									labelAlign: 'right',
									label : '目标:',
									'default' : '',
									items :
									[
										[ editor.lang.common.notSet, 'notSet' ],
										[ editor.lang.common.targetNew, '_blank' ],
										[ editor.lang.common.targetTop, '_top' ],
										[ editor.lang.common.targetSelf, '_self' ],
										[ editor.lang.common.targetParent, '_parent' ]
									],
									onChange : function(){
										if(curId == null) {
											return;
										}

										var target = myDialog.getValueOf("tab1", "areaImageCmbTarget");
										var tmpId = curId.replace("CKeditorcenter", "drag");
										data[tmpId].target = target;
									}
							  }
							]
						  }
							]
						}
						]
					}
				]
			}
		]
	};
	};

	CKEDITOR.dialog.add( 'areaimage', function( editor )
		{
			return imageDialog( editor, 'areaimage' );
		});
})();